<template>
    <div class="header">
        <BackTitle class="title" size="55px"></BackTitle>
        <el-input v-model="$store.state.keyword"
                placeholder="请输入标题关键字"
                class="input title-input">
                </el-input>
        <el-input v-model="$store.state.city"
                placeholder="请输入城市"
                class="input city-input">
                </el-input>
        <el-button type="danger"
                icon="el-icon-search"
                circle
                @click="search">
                </el-button>


        <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">

                <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="log out">Log out</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>

        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                class="avatar">
                </el-avatar>
    </div>
</template>

<script>

import BackTitle from "@/components/BackTitle.vue";

export default {
  name:'ListHeader',

  components:{
    BackTitle
  },

  data() {
    return {
        keyword:'',
        city:''
    }
  },

  methods: {
    search() {

      // for(let i of this.$store.state.event_list){
        // 做各种判断之前需要先发送请求获取最新的活动列表数据，用来防止多次操作输入框（还没写）

        // console.log('要执行关键词筛选了'+i.id)

        // if(!i.title.includes(this.keyword)){
        //   this.$store.dispatch('remove',i)
        // }

        // if(!i.city.includes(this.city)){
        //   console.log(i)
        //   this.$store.dispatch('remove',i)
        // }
      // }

      this.$store.dispatch('search')




    },
    handleCommand(command){
      console.log(command)
      if(command = 'log out'){
        this.$router.push({
          name:'Login'
        })
      }
    }
  },
}
</script>

<style scoped>
.header{
    border-bottom-style: solid;
    border-bottom-width:1px;
    border-bottom-color:#BBBBBB;
    width:100%;
    height: 7%;
    position:absolute;
}

::v-deep .title{
  float:left;
  margin-top: -1.2%;
  margin-left: -3.5%;
}

/*设置关键词和城市输入框的通用属性*/
.input{
  width:15%;
  float:left;
  margin-top: 0.7%;
}

/*设置关键词输入框的属性*/
::v-deep .title-input .el-input__inner{
  border-radius: 12px 0 0 12px;
  float:left;
  margin-left: 30%;
}

::v-deep .city-input .el-input__inner{
  border-radius: 0;
  float:left;
  margin-left: 30%;
}

/*设置搜索按钮的属性*/
.el-button{
  width: 3%;
  height: 53%;
  margin-top: 0.7%;
  margin-left: 4.2%;
  border-radius: 0 12px 12px 0;
  background-color: #F65858;
  float:left;
}
.el-dropdown {
    float:right;
    margin-top: 1.4%;
    margin-right: 2%;
}
.el-dropdown-link {
    cursor: pointer;
    color: #CECECE;
}
.el-icon-arrow-down {
    font-size: 16px;
}

.avatar{
    float:right;
    margin-top: 0.4%;
}

</style>
